import React, { Component } from "react";
import LXSwiper from "./../common/LXSwiper";
import styles from "./Special.module.scss";
import college from "./../../images/icon_college@2x.png";
import company from "./../../images/icon_company@2x.png";
import up from "./../../images/icon_up arrow@2x.png";
import down from "./../../images/icon_down arrow@2x.png";
// import play from './../../images/icon_play@2x.png'
import lineB from "./../../images/lineb.png";
import placeholder from "./../../images/placeholder.jpg";
import api from "./../../serve/api";
import { setArray } from "./../../util/index";
import { withRouter } from "react-router-dom";

const tabs = [
  {
    title: "全省社科分院（所）专刊",
    image: college
  },
  {
    title: "全省智库单位（机构）专刊",
    image: company
  }
];

const tabs2 = ["智库专家", "智库成果"];

class Special extends Component {
  constructor(props) {
    super(props);
    this.state = {
      specials: [],
      specialFatherTypes: [],
      professors: [],
      professorsGroup: [],
      results: [],
      resultsGroup: [],
      professorPage: 1,
      resultPage: 1,
      open: false,
      modalMessage: "",
      adverImgUrl: "",
      adverImgType: "",
      adverImgId: "",
      videos: [],
      maxProfessorPage: "",
      mixProfessorPage: "",
      maxResultPage: "",
      mixResultPage: ""
    };
  }

  componentDidMount() {
    this.getSpecialFatherTypes();
    this.getSpecial();
    this.getProfessor(this.state.professorPage);
    this.getResult(this.state.resultPage);
    this.getPic();
    this.getMedia();
  }

  onLast(index) {
    if (index === 0) {
      let { professorPage, maxProfessorPage } = this.state;
      if (professorPage === 1) {
        professorPage = maxProfessorPage;
      } else {
        professorPage -= 1;
      }
      this.setState({
        professorPage
      });
      this.getProfessor(professorPage);
    } else {
      let { resultPage, maxResultPage } = this.state;
      if (resultPage === 1) {
        resultPage = maxResultPage;
      } else {
        resultPage -= 1;
      }
      this.setState({
        resultPage
      });
      this.getResult(resultPage);
    }
  }

  onNext(index) {
    if (index === 0) {
      let { professorPage, maxProfessorPage } = this.state;
      if (professorPage >= maxProfessorPage) {
        professorPage = 1;
      } else {
        professorPage += 1;
      }
      this.setState({
        professorPage
      });
      this.getProfessor(professorPage);
    } else {
      let { resultPage, maxResultPage } = this.state;
      if (resultPage >= maxResultPage) {
        resultPage = 1;
      } else {
        resultPage += 1;
      }
      this.setState({
        resultPage
      });
      this.getResult(resultPage);
    }
  }

  async getSpecial() {
    const data = await api.listSpecial({ page: 1, pageSize: 7 });
    if (data && data.code === "000000") {
      this.setState({
        specials: data.result || []
      });
    }
  }

  async getSpecialFatherTypes() {
    const { code, result } = await api.listSpecialFatherTypes();
    if (code !== "000000") {
      return;
    }
    this.setState({
      specialFatherTypes: result || []
    });
  }

  async getProfessor(page) {
    const data = await api.listProfessor({ page, pageSize: 999999 });
    if (data && data.code === "000000") {
      const groups = setArray(data.result);
      this.setState({
        professors: data.result || [],
        professorsGroup: groups || [],
        maxProfessorPage: Math.ceil(data.resultNum / 4)
      });
    }
  }

  async getResult(page) {
    const data = await api.fetchListTtResult({ page, pageSize: 999999 });
    if (data && data.code === "000000") {
      const groups = setArray(data.result);
      this.setState({
        results: data.result || [],
        resultsGroup: groups || [],
        maxResultPage: Math.ceil(data.resultNum / 4)
      });
    }
  }

  async getPic() {
    const data = await api.listAdverApi({ page: 1, pageSize: 1, position: 3 });
    if (data && data.code === "000000") {
      if (data.result.length > 0) {
        this.setState({
          adverImgUrl: data.result[0].img,
          adverImgType: data.result[0].type,
          adverImgId: data.result[0].theme_ad_id
        });
      }
    }
  }

  async getMedia() {
    const data = await api.listMedia({ page: 1, pageSize: 2 });
    if (data && data.code === "000000") {
      this.setState({
        videos: data.result || []
      });
    }
  }

  //智库专家&&成果更多
  onMore(index) {
    if (index === 0) {
      this.props.history.push(`/mainPage/thinkTankData?id=professor`);
    } else {
      this.props.history.push("/mainPage/result");
    }
  }

  //智库单位
  onOrg(item) {
    this.props.history.push(`/mainPage/SpecialList/${item.id}`);
  }

  //智库视频更多
  onTTVideoMore() {
    this.props.history.push("/mainPage/thinkTankData?id=media");
  }

  //专刊详情
  onSpecialItem(item) {
    this.props.history.push(`/mainPage/pageDetail/special/${item.id}`);
  }

  //专家&&成果
  onProfessorResultItem(index, item) {
    let url = "";
    if (index === 0) {
      url = `/mainPage/professorDetail/thinkTankData/${item.id}`;
    } else {
      url = `/mainPage/commonDetail/result/${item.id}`;
    }
    this.props.history.push(url);
  }

  //决策专刊更多
  onSpecialAll() {
    // this.props.history.push('/mainPage/SpecialList')
    this.props.history.push("/mainPage/SpecialTotal");
  }

  //视频详情
  onViedoInfo(item) {
    this.props.history.push(`/mainPage/pageDetail/media/${item.id}`);
  }

  render() {
    const {
      specials,
      professors,
      results,
      adverImgUrl,
      adverImgId,
      adverImgType,
      videos,
      professorsGroup,
      resultsGroup,
      specialFatherTypes
    } = this.state;
    const list = () => {
      return specials.map((item, index) => {
        return (
          <div
            key={index}
            className={styles.special_list_item}
            onClick={() => this.onSpecialItem(item)}
          >
            <div className={styles.img_item}>
              <img src={item.img_url || placeholder} alt="" />
            </div>
            <span>{item.title || ""}</span>
          </div>
        );
      });
    };

    const professor = (data, index) => {
      return data.map((item, subIndex) => {
        return (
          <div
            key={subIndex}
            className={styles.special_list_item1}
            onClick={() => this.onProfessorResultItem(index, item)}
          >
            <div className={styles.img_item1}>
              <img
                src={
                  index === 0
                    ? item.head_img || placeholder
                    : item.img_url || placeholder
                }
                alt=""
              />
            </div>
            <span>{index === 0 ? item.name || "" : item.title || ""}</span>
          </div>
        );
      });
    };

    const resultList = index => {
      return resultsGroup.map((array, parentI) => {
        return (
          <div className={styles.list_container} key={parentI}>
            {professor(array, index)}
          </div>
        );
      });
    };

    const professorList = index => {
      return professorsGroup.map((array, parentI) => {
        return (
          <div
            className={styles.list_container}
            key={parentI}
            style={{ width: 180 }}
          >
            {professor(array, index)}
          </div>
        );
      });
    };

    return (
      <div className={styles.special}>
        <div className={styles.header} />
        <div className={styles.special_content}>
          {/* 决策专刊 */}
          <span className={styles.more} onClick={() => this.onSpecialAll()}>
            【更多】
          </span>
          <div className={styles.special_list}>
            <LXSwiper datas={list()} slides={specials.length} delay={2000} />
          </div>
          <div className={styles.special_tab_bottom}>
            {specialFatherTypes.map((item, index) => {
              return (
                <div key={index} onClick={() => this.onOrg(item)}>
                  <img src={index === 0 ? college : company} alt="" />
                  {item.name || ""}
                </div>
              );
            })}
          </div>
        </div>
        {/* 分割线 */}
        <div className={styles.img_bottom}>
          <img src={lineB} alt="" />
        </div>
        <div className={styles.special_professor}>
          {/* 专家&&成果 */}
          <div className={styles.professor_div}>
            {tabs2.map((title, index) => {
              const data = index === 0 ? professors : results;
              return (
                <div className={styles.item} key={index}>
                  <div className={styles.professor_title_div}>
                    {title}
                    <span onClick={() => this.onMore(index)}>【更多】</span>
                  </div>
                  <div className={styles.professor_list}>
                    {/* 上翻 */}
                    {/* <div className={styles.arrow_up}>
                      <img src={up} alt=""/>
                    </div> */}
                    {index === 0 && (
                      <div className={styles.list_container_bg}>
                        <LXSwiper
                          datas={professorList(index)}
                          direction="vertical"
                          isNav={true}
                          delay={4000}
                        />
                      </div>
                    )}
                    {index === 1 && (
                      <div className={styles.list_container_bg}>
                        <LXSwiper
                          datas={resultList(index)}
                          direction="vertical"
                          isNav={true}
                          delay={4000}
                        />
                      </div>
                    )}
                    {/* 下翻 */}
                    {/* <div className={styles.arrow_up}>
                      <img src={down} alt=""/>
                    </div> */}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        {/* 底部图片 */}
        <div className={styles.center_img}>
          <img
            src={adverImgUrl || ""}
            alt=""
            onClick={() => this.clientThemeAd(adverImgType, adverImgId)}
          />
        </div>
        <div className={styles.tt_video}>
          <div className={styles.video_title_div}>
            智库视频
            <span onClick={() => this.onTTVideoMore()}>【更多】</span>
          </div>
          <div className={styles.video_list}>
            {videos.map((item, index) => {
              return (
                <div
                  className={styles.video_list_item}
                  key={index}
                  onClick={() => this.onViedoInfo(item)}
                >
                  <div className={styles.vieo_img_div}>
                    <video
                      className={styles.video_bg}
                      controls="controls"
                      preload="meta"
                    >
                      <source src={item.url || ""} type="video/mp4" />
                    </video>
                  </div>
                  <div className={styles.video_list_item_content}>
                    <h1>{item.title || ""}</h1>
                    <span>{item.content || ""}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
export default withRouter(Special);
